<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="QuerySelector">
          <QuerySelector
              style="width: 300px"
              v-model="form.dictType"
              :selected="selected"
              keyName="dictType"
              labelName="dictName"
              :remoteMethod="remoteMethod">
              <template v-slot:showSelected="{ selected }">
                  <span :title="`${selected.dictType}-${selected.dictName}`">{{selected.dictType}}-{{selected.dictName}}</span>
              </template>
              <template v-slot:item="{ item }">
                  <span :title="`${item.dictType}-${item.dictName}`">{{item.dictType}}-{{item.dictName}}</span>
              </template>
          </QuerySelector>
        </el-form-item>
        <el-form-item label="SearchSelector">
          <SearchSelector
              style="width: 300px"
              v-model="form.dictType2"
              :selected="selected2"
              keyName="dictType"
              labelName="dictName"
              :remoteMethod="remoteMethod">
              <template v-slot:showSelected="{ selected }">
                  <span :title="`${selected.dictType}-${selected.dictName}`">{{selected.dictType}}-{{selected.dictName}}</span>
              </template>
              <template v-slot:item="{ item }">
                  <span :title="`${item.dictType}-${item.dictName}`">{{item.dictType}}-{{item.dictName}}</span>
              </template>
          </SearchSelector>
        </el-form-item>
        <el-form-item label="附件">
            <UploadFile
              :data="{
                orderNo: 'RXT202306080000100001',
                fileType: 1
              }"
              style="width:300px"
              :size="10"
              :limit="3"
              :file-list="fileList"
              multiple
          >
          </UploadFile>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { listType } from "@/api/custom/dict/type";
import UploadFile from '@/components/UploadFile';
export default {
  name: "components",
  components: {
    UploadFile
  },
  data() {
    return {
      selected: {},
      form: {
          dictType: '',
          dictType2: '',
      },
      selected2: {},
      fileList: [{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }]
    };
  },
  created() {
    
  },
  methods: {
    remoteMethod (query) {
        return new Promise(async(resolve,reject) => {
            try {
                const res = await listType({pageNum: 1,pageSize: 10, dictName: query});
                resolve(res.rows);
            } catch (err) {
                resolve([]);
            }
        })
    }
  }
};
</script>